<template>
  <div class="search_wallet">
    <!-- <wxc-searchbar ref="wxc-searchbar" @wxcSearchbarInputOnInput="wxcSearchbarInputOnInput"></wxc-searchbar> -->
    <div class="search-form">
      <div class="search-icon">
        <image style="width:34px;height:34px;" src="root:img/home/search-icon@2x.png"></image>
      </div>
      <div class="search-input">
        <input :color='inputText.color' @input="search_wallet" type="text"  placeholder="搜索币种"  class="address-input" />
      </div>
      <div class="search-cancel" @click="navigator.dismiss()">
        
        <text style="color:#999999;font-size:28px;">取消</text>
      </div>
    </div>
    <div class="search-content">
      <wxc-indexlist :normal-list="list"
                   :show-index="showIndex"
                   @wxcIndexlistItemClicked="wxcIndexlistItemClicked"></wxc-indexlist>
    </div>
  </div>
</template>
<script>
import { WxcIndexlist } from 'weex-ui';
export default {
  name: '',
  data() {
    return {
      list: [],
      showIndex: true,
      restaurants:[],
      timeout:null,
      operate:'',
      wallet_list:[]
    }
  },
  components: {WxcIndexlist},
  methods: {
      onLoad(p){
        if(p)this.operate = p.operate || ''
        const obj =  this.pref.get('wallet_list')
        this.wallet_list = obj.wallet_list
        let list = []
        if(obj.wallet_list) {
          list = obj.wallet_list
        }
        list.forEach(item => {
          this.list.push({
              name: item.name,
              pinYin: item.name,
            })
        });
      },
      get_users_wallet(){
        this.$http.get('wallet/listUserWalletInfo',{accountId:this.current_wallet.account_id},(res)=>{
          this.pref.set('wallet_list',{wallet_list:res.result})
          this.list = res.result
        },()=>{
          if(this.list.length>0) return  
          this.get_users_wallet()
        })
      },
      search_wallet(e,cb){
        const queryString = e.value;
        var restaurants = dataList;
        this.list = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      wxcIndexlistItemClicked (e) {
        const item = this.wallet_list.filter(v => v.name === e.item.name);
        if(this.operate === 'coin'){
          if(item&&item[0].isTransferOut){
            this.push('root:pages/wallet/coin.js',{data:item[0],wallet_types:this.wallet_list})
          }else{
            this.toast(this.$t('common.in_coin'))
          }
        }else{
          this.navigator.dismissFull({name:e.item.name,data:item[0],wallet_types:this.wallet_list},true)
        }
      }
  }
}
</script>
<style scoped>
.search_wallet{
  width: 750px;
}
.search-form{
  padding-top: 54;
  padding-left: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.search-icon{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: center;
  margin-right: 20px;
}
.address-input{
  width: 590px;
  height: 90px;
  font-size: 28px;
}
.search-cancel{
  margin-right: 30px;
}
.search-content{
  width: 750px;
  align-items: center;
}
</style>